[JQuery] 절대좌표 및 상대좌표 확인 및 이동하기, offset(), position()

자바스크립트를 사용하여 특정 엘리먼트의 위치를 알려고합니다. 어떻게 해야할까요? jQuery를 사용하면 간단하게 요소의 절대좌표와 상대좌표를 구하거나 이를 이동할 수 있습니다. 그럼 아래에서 그 방법에 대하여 알아보고자 합니다... 우선 요소들의 위치 값들이 언제... 왜 필요할까요?
​​​​​​​

# 절대좌표, 상대좌표(절대위치 및 상대위치) 필요한 경우는?

모바일 및 태블릿 사용환경을 고려한 반응형 웹사이트 구현할 경우 브라우저의 크기에 따라 레이아웃이 바뀌는 경우가 많습니다. 이런 경우 콘테츠의 크기가 변경하거나 위치가 바뀔 수도 있습니다. 또한 단순하게 위치가 변경된 것이 아닌 경우 엘리먼트의 현재 위치를 이동하거나 어느 정도의 위치조정이 필요하겠죠. 이 경우 좌우 상하 값은 어떻게 결정해야 할까요? 좌우상하 좌표값이 필요합니다.

가장 쉽게 볼 수 있는 예로 움직이지 않고 고정되어 붙어있는 스티키 네비게이션(sticky nav)을 구현할 경우도 이에 해당합니다... 반응형 또는 모바일 환경에서 하단 또는 특정 위치에 고정된 값을 가지며 따라 다니는 것들을 구현하기 위하여 좌표값이 필요합니다. 그럼 해당 위치값을 알거나 또는 이동할 수 있는 함수에 대해 자세히 알아보겠습니다.

# 요소를 절대좌표 및 상대좌표로 이동하는 함수

절대좌표는 브라우저 창을 기준하거나 문서 전체를 기준으로 나타내는 좌표값을 나타내고 이와 달리 상대위치는 해당 엘리먼트의 부모 영역을 기준으로 상대적인 좌표를 반환하게 됩니다. 이때 사용되는 함수가 offset()이며 offset()함수는 단순히 현재 위치를 보여주는 것 뿐만 아니라 절대좌표를 기준으로 원하는 위치로 이동하는 것 역시 가능합니다.

! 절대좌표 확인 및 이동함수 : offset()

아래 예제는 test 이름의 아이디를 가진 요소의 위치값을 제이쿼리로 얻어내는 예제입니다. 먼저 html 코드입니다.

아래는 해당 요소의 위치를 알아내는 방법입니다.

그렇다면 해당 요소를 이동하게 하려면 어떻게 할까요? 매개변수에 옵션을 추가하여 이동시킵니다.

참고로 offset()함수는 요소를 해당위치로 순간적으로 이동시킬 수 있을뿐 서서히 이동하게 해주는 애니메이션 효과는 없습니다. 만약, 이를 구현하길 원한다면 제이쿼리의 animate() 함수를 사용해 보세요. 간단하게 동적인 효과를 부여할 수 있답니다. 이 방법 외에도 CSS3의 transition을 사용하는 방법 역시 좋은 방법입니다.

animate() 함수에 대하여 알아보기 >
http://webisfree.com/2014-09-23/[jquery]-제이쿼리를-이용해-요소를-상대-또는-절대좌표-서서히-이동-animate()

 ! 상대적인 좌표위치 확인함수, position()

부모 요소의 위치를 기준으로 값을 얻는 상대좌표(상대위치)를 사용한 방법입니다. 아래 예제를 봐주세요.

아래는 스크립트 코드입니다.

# 마치면서

이처럼 부모 요소를 기준으로 원하는 요소의 상대적인 위치값을 얻어낼 수 있습니다. 이 함수를 바로 상위 부모의 요소만 계산하기 때문에 부모가 여러개인 경우 똑같은 함수를 반복하여 호출하는 코드가 필요합니다. 일반적으로 while() 또는 for()문을 사용하면서 원하는 부모를 만날때까지 반복 계산하는 코드를 구현할 수 있습니다.